<template>
  <div class="paginationTable">
    <div class="table">
      <el-table
        ref="mTable"
        v-if="elTableColumn.length"
        :default-expand-all="defaultExpandAll"
        :data="tableData"
        :max-height="height"
        :tree-props="treeProps"
        row-key="id"
        border
        :lazy="lazy"
        :load="load"
        @cell-dblclick="dbClick"
        @selection-change="selectionChange"
        :multipleSelection="selection"
        :show-summary="showSummary"
        :summary-method="summaryMethod"
        style="width: 100%">
        <el-table-column
          v-if="multipleSelection"
          align="center"
          type="selection"
          fixed="left"
          width="75">
        </el-table-column>
        <my-el-table-column
          v-for="(column,i) in elTableColumn"
          :key="column.label+i"
          :column="column"
        >
        </my-el-table-column>
      </el-table>
    </div>
    <div class="pagination" v-if="pagination">
      <el-pagination
        background
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="pageNo"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
    ref,reactive,defineComponent,onMounted
} from 'vue';
import BetterUtilTools from 'better-util-tools';
import { msgFn } from 'src/utils';
import myElTableColumn from '@/components/paginationTable/myElTableColumn.vue';

const labels = ['操作'];
const _ = new BetterUtilTools();
export default defineComponent({
    'name': 'paginationTable',
    'props':{
        //表格头
        'elTableColumn':{
            'type':Array,
            'default':()=>[]
        },
        //表格数据
        'tableData':{
            'type':Array,
            'default':()=>[]
        },
        //多选框id
        'multipleSelection':{
            'type':[Array,Boolean],
            'default':()=>false
        },
        //总页数
        'total':{
            'type':Number,
            'default':()=>0
        },
        //当前页
        'pageNo':{
            'type':Number,
            'default':()=>1
        },
        //每页条数
        'pageSize':{
            'type':Number,
            'default':()=>10
        },
        //是否显示分页
        'pagination':{
            'type':Boolean,
            'default':()=>false
        },
        'height':{
            'type':[Number,String],
            'default':()=>'100%'
        },
        'defaultExpandAll':{
            'type':Boolean,
            'default':()=>true
        },
        'lazy':{
            'type':Boolean,
            'default':()=>false
        },
        'treeProps':{
            'type':Object,
            'default':()=>({
                'children': 'children',
                'hasChildren': 'hasChildren'
            })
        },
        //是否显示合计
        'showSummary':{
            'type':Boolean,
            'default':()=>false
        },
        //合计方法
        'summaryMethod':{
            'type':Function,
            'default':()=>()=>{}
        }

    },
    'components':{
        myElTableColumn
    },
    data(){
        return {
            'selection':[]
        };
    },
    setup(){
        const mTable = ref(null);
        const test = reactive({'a':21});
        onMounted(()=>{
            //console.log(mTable.value);
            //console.log(test);
        });
        return {
            mTable,
            test,
            dbClick(row, column, cell, event){
                if (!labels.includes(column.label) && cell.innerText){
                    _.copyTextToClipboard(cell.innerText,()=>{
                        msgFn('复制成功','success',2000);
                    });
                }
            }
        };
    },
    mounted(){
        if (this.multipleSelection && this.multipleSelection.length){
            this.selection = this.multipleSelection;
            this.tableData.forEach(t=>{
                if (this.multipleSelection.includes(t.id)){
                    this.$refs.mTable.toggleRowSelection(t);
                }
            });
        }
    },
    'methods':{
        sizeChange(val) {
            this.$emit('handleSizeChange',val);
        },
        currentChange(val) {
            this.$emit('handleCurrentChange',val);
        },
        selectionChange(val){
            this.$emit('handleSelectionChange',val);
        },
        load(tree, treeNode, resolve){
            this.$emit('load',tree, treeNode, resolve);
        }
    }
});
</script>

<style scoped lang="less">
  @import "~@/components/paginationTable/index";
</style>
